<script>
import MyHome from './MyHome.vue';
import MyInfo from './MyInfo.vue';
import FindHouse from './FindHouse.vue';
import HmMine from './HmMine.vue';
export default {
    components:{
        MyHome,
        MyInfo,
        FindHouse,
        HmMine
    },
    data() {
        return {
            navList:['首页','找房','资讯','我的'],
            selectIndex:0
        }
    }
}
</script>

<template>
    <div class="nav">
        <MyHome v-if="selectIndex === 0"></MyHome>
        <MyInfo v-if="selectIndex === 1"></MyInfo>
        <FindHouse v-if="selectIndex === 2"></FindHouse>
        <HmMine v-if="selectIndex === 3"></HmMine>
        <ul>
            <li v-for="(item,index) in navList" :key="index" @click="selectIndex = index">{{ item }}</li>
        </ul>
    </div>
</template>

<style scoped>
.nav ul {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 50px;
    line-height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
}
</style>
